<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="shortcut icon" href="img/SL.ico" type="image/x-icon">

<link href="<%=basePath%>css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="<%=basePath%>css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
<link href="<%=basePath%>css/animate.css" rel="stylesheet">
<link href="<%=basePath%>css/style.css?v=4.1.0" rel="stylesheet">
<style>
	/* 三个按钮的颜色 */
	.btn{
		background:#395874;
	}
	.a{
		margin:0 auto;
		width:300px;
		height:50px;
	}
	/* 表格大小位置的设计  */
	.panel{
		width:800px;
		margin-left:auto;
		margin-right:auto;
		margin-top:20px;
	}
	/* 表格行列的大小和鼠标悬浮在字体上时字体的颜色  */
	.td1{
		width:20px;
	}
	.td2{
		width:600px;
	}
	a{ color:#333; text-decoration:none;}
	a:hover{ color:#395874; text-decoration:none;}
	a:active{ color:black;}
	
	/* 分页条样式  */
	.pag{
		margin-left:480px;
		/* margin-right:auto; */
		width:500px;
		height:50px;
	}
</style>
<script src="<%=basePath%>js/jquery.min.js"></script>
</head>
<body class="gray-bg">
		<div class="wrapper wrapper-content animated fadeInRight">
		<div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>公告信息</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="table_basic.html#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li>
                                <a href="table_basic.html#">选项1</a>
                            </li>
                            <li>
                                <a href="table_basic.html#">选项2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <table class="table table-hover">
                        <tbody>
                        <c:forEach items="${noticeList}" var="notice">
							<tr>
									<td class="td1"><input type="checkbox" name="notice_id" class="notice" notice_id="${notice.notice_id}" value="${notice.notice_id}"/></td>
									<td class="td2"><span class="glyphicon glyphicon-tags"></span> <a>${notice.notice_name}</a></td>
									<td class="td3">${notice.notice_time}</td>
									<td class="bolong" style="display:none">${notice.notice_desc}</td>
							</tr>
						</c:forEach>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

<!-- 三个按钮 -->
	<div class="a" role="group" aria-label="...">
		<button type="button" class="btn btn-default"
			style="margin-left: 30px;" onclick="add()">新增</button>
		<button type="button" class="btn btn-default"
			style="margin-left: 30px;" onclick="edit()" type="submit">修改</button>
		<button type="button" class="btn btn-default"
			style="margin-left: 30px;" onclick="del()" type="submit">删除</button>
	</div>

<!-- 新增模块弹窗 -->
  <div class="add col-md-2" style="display: none">

			<div class="container-fluid"></div>
				<form action="${pageContext.request.contextPath}/NoticeServlet/add " method="post">
				  <div class="form-group">
				    <label style="margin-top:30px;">公告标题</label>
				    <input type="text" class="form-control" name="notice_name" style="width:400px;border:1px black solid" >
				  </div>
				  <div class="form-group">
				    <label style="margin-top:20px">公告内容</label>
				    <textarea name="notice_desc" id="desc" style="width:400px;height:200px;border:1px black solid"></textarea>
				  </div>
				  <div style="margin-top:30px;margin-left:150px;">
				  <button type="submit" class="btn btn-default" >添加</button>
				  </div>
				</form>
</div>
<!-- 修改模块弹窗 -->
	  <div class="edit col-md-2" style="display: none">

			<div class="container-fluid"></div>
				<form action="${pageContext.request.contextPath}/NoticeServlet/edit" method="post">
				  <div class="form-group">
				    <label style="margin-top:30px;">公告标题</label>
				    <input type="text" class="form-control" id="notice_name" name="notice_name" style="width:400px;border:1px black solid" >
				  </div>
				  <div class="form-group">
				    <label style="margin-top:20px">公告内容</label>
				    <textarea name="notice_desc" id="notice_desc" style="width:400px;height:200px;border:1px black solid"></textarea>
				  </div>
				  <div class="form-group">
				  <input type="text" style="display:none" id="notice_id" name="notice_id"/>
				  </div>
				  <div style="margin-top:30px;margin-left:150px;">
				  <button type="submit" class="btn btn-default" >修改</button>
				  </div>
				</form>
</div>
<!-- 分页页码 -->
<div class="pag">	
</div>
</body>
<!-- 全局js -->
	
	<script src="<%=basePath%>js/bootstrap.min.js?v=3.3.6"></script>
	<script src="<%=basePath%>js/plugins/metisMenu/jquery.metisMenu.js"></script>
	<script src="<%=basePath%>js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
	<script src="<%=basePath%>js/plugins/layer/layer.min.js"></script>

	<!-- 自定义js -->
	<script src="<%=basePath%>js/hplus.js?v=4.1.0"></script>
	<script src="<%=basePath%>js/contabs.js"></script>

	<!-- 第三方插件 -->
	<script src="<%=basePath%>js/plugins/pace/pace.min.js"></script>
	<script src="<%=basePath%>js/neditor.all.js"></script>
	<script src="<%=basePath%>js/neditor.config.js"></script>
	<script src="<%=basePath%>js/jquery-bootstrap-pagination .js"></script>
	<script >
	
		/* 新增按钮  */
		function add(){
			layer.open({
				type: 1,
				content: $('.add'),
				area: ['500px', '500px']
		}
		)	
		}
		/* 修改按钮  */
		function edit(){
 			if($('.notice:checked').length==0){
				layer.alert('请选中后再进行修改', {icon: 2});
			}else if($('.notice:checked').length>1){
				layer.alert('只能选取一个进行修改', {icon: 2});
			}else{
				$.get('${pageContext.request.contextPath}/NoticeServlet/preEdit',
					{"notice_id":$('.notice:checked').attr('notice_id')},function(data){
						var notice = JSON.parse(data);
						$("#notice_name").attr("value",notice[0].notice_name);
						$("#notice_desc").html(notice[0].notice_desc);
						$("#notice_id").attr("value",notice[0].notice_id);
						layer.open({
							type: 1,
							content: $('.edit'),
							area: ['500px', '500px']
								}
							)	
						}	
					)
				} 
		}
		/* 删除按钮  */
		function del(){
				$.get('${pageContext.request.contextPath}/NoticeServlet/removeById',
						$('.notice').serialize(),
						function(s){
					if(s==1){
						layer.msg('删除成功',{icon: 1},function(){
							
							location.reload();
						})
					}else{
						layer.alert('请选中后再进行删除 ', {icon: 2});
					}
				});
			} 
	</script>
	<!-- 分页条 -->
		<script>
		$(".pag").pagination({
			total_pages:${pageCount},
			current_page:${pageNum},
			next:"下一页",
			prev:"上一页",
			display_max:4,
			callback : function(event, page) {
				location = "${pageContext.request.contextPath}/NoticeServlet/findAllBySplit?pageNum="+page;
			}
		}) 
	</script>
	
	<script>
		$('a').each(function(){
			$(this).click(function(){
				layer.open({
					type: 1,
					shadeClose :true,
					content: $(this).parents('tr').find('td:eq(3)').text(),
					area: ['800px', '500px']
				});
			});
			
		})
	</script>
</html>